<template>
    <div class="app-container">
        <!-- 管家编辑 -->
        <h5 class="titleInfo">
            管家编辑
        </h5>
        <el-form :inline="true" label-width="130px">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="管家姓名">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="地址">
                        <el-cascader
                            placeholder="请选择省市"
                            :options="options"
                            v-model="areas"
                            >
                        </el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="分公司">
                        <el-select placeholder="请选择" v-model="form.officeId">
                            <el-option
                                v-for="item in officeOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="管家手机号">
                        <el-input v-model="form.username"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="密码">
                        <el-input v-model="form.password"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item>
                <el-button style="margin-top:30px;margin-left:130px" type="primary" @click="submitFn()" >立即提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    import { butlerDetail,updateButler } from '@/api/stewardItem' 
    import { companyList } from '@/api/branchOfficeDropDown'
    import {regionDropDown} from '@/api/area'
    export default {
        name:"stewardItemEdit",
        data(){
            return {
                areas:[],
                userId:"",
                form:{},
                options: [],
                officeOption:[],
            }
        },
        inject:['reload'],
        mounted(){
            this.userId = Number(this.$route.query.userId)
            this.getOption()
            this.getDetail()
        },
        methods:{
            //获取列表
            getOption(){
                //分公司列表
                companyList().then(res =>{
                    let resData = res.data.data
                    let newData = [];
                    resData.forEach(e => {
                        newData.push({
                            value:e.id,
                            label:e.name
                        })
                    });
                    this.officeOption = newData
                })
                .catch(error =>{
                    this.$message.error(error);
                })
                // 省市列表
                regionDropDown().then(res=>{
                    let newArr=[]
                    res.data.data.forEach((item1,index) => {
                        newArr.push({
                            value: item1.id,
                            label: item1.name,
                        })
                        if(item1.children!=null){
                            newArr[index]["children"] = []
                            item1.children.forEach((item2) => {
                                newArr[index]["children"].push({
                                    value: item2.id,
                                    label: item2.name,
                                })
                            })
                        }
                    });
                    this.options = newArr
                })
            },
            //获取详情
            getDetail(){
                let datas = {
                    id:this.userId
                }
                butlerDetail(datas).then(res=>{
                    if(!res.data.code){
                        // console.log(res)
                        this.form = res.data.data
                        this.form.username = this.form.userName
                        this.areas = [
                            this.form.provinceId,
                            this.form.cityId
                        ]
                    }else{
                        this.$message.error(res.data.msg)
                    }
                })
                .catch(error=>{
                    this.$message.error(error)
                })
            },
            //提交
            submitFn(){
                if(this.areas.length>0){
                    this.form.province = this.areas[0]
                    this.form.city = this.areas[1]
                }
                let datas = this.form
                updateButler(datas).then(res=>{
                    if(!res.data.code){
                        this.$message({
                            showClose: true,
                            message: '修改成功',
                            type: 'success'
                        });
                        this.$router.push('/stewardItemIndex')
                        this.reload()
                    }else{
                        this.$message.error(res.data.msg)
                    }
                })
                .catch(error=>{
                    this.$message.error(error)
                })
            }
        }
    }
</script>

<style scoped>
    .app-container{padding: 0px!important}
    .form{margin-left: 268px}
</style>